import Block from "@/component/block";
import FollowButton from "@/component/follow-button";
import { Author } from "@/type/author";
import { Button, Col, Icon, Row, Tabs } from "annar";
import * as React from "react";
import { usePageEvent } from "remax/macro";
import { request, View } from "remax/wechat";
import styles from "./index.css";
import { access, origin } from "@/config/config";
import { useQuery } from "remax";
import FansButton from "@/component/fans-button";

const { TabContent } = Tabs;

const tabs = [
  {
    key: "0",
    title: "关注",
  },
  {
    key: "1",
    title: "粉丝",
  },
];

export type AuthorWithState = {
  id: string;
  nickName: string;
  avatar: string;
  isFollow: boolean;
};

export default () => {
  let query = useQuery();

  const [authorList, setauthorList] = React.useState<AuthorWithState[]>([]);
  const [fanList, setFanList] = React.useState<AuthorWithState[]>([]);
  const [stateKey, setStateKey] = React.useState(query.state);

  usePageEvent("onLoad", () => {
    let loginInfo = wx.getStorageSync("loginInfo");
    wx.request({
      url: `${origin}/follow/getFollowList/${query.userId}`, // 获取关注列表
      success: async (res: any) => {
        let tempList = res.data.data;
        for (let i = 0; i < tempList.length; i++) {
          console.log(tempList);
          await initFollowState(tempList[i]);
        }
        setauthorList(tempList);
      },
    });

    wx.request({
      url: `${origin}/follow/getFansList/${query.userId}`, // 获取粉丝列表
      header: {
        token: loginInfo.token,
      },
      success: async (res: any) => {
        let tempList = res.data.data;
        for (let i = 0; i < tempList.length; i++) {
          console.log(tempList);
          await initFollowState(tempList[i]); // 查询是否关注, 如果关注了就显示相互关注, 如没有就显示回关
        }
        setFanList(tempList);
      },
    });
  });

  const initFollowState = async (item: AuthorWithState) => {
    let loginInfo = wx.getStorageSync("loginInfo");
    await request({
      url: `${origin}/follow/isFollow/${item.id}`, // 判断是否为关注
      header: {
        token: loginInfo.token,
      },
      success: (res: any) => {
        item.isFollow = res.data.data;
      },
    });
  };

  const navigateToProfile = (userId: string) => {
    wx.navigateTo({
      url: `/pages/profile/index?userId=${userId}`,
    });
  };

  return (
    <View>
      <Tabs
        onTabClick={({ key }) => setStateKey(key)}
        activeKey={stateKey}
        fixed={true}
      >
        <TabContent key={tabs[0].key} tab={tabs[0].title}>
          <Block title={""}>
            {authorList.map((item) => (
              <Row key={item.id} style={{ margin: "10px 2px" }}>
                <Col span={3}>
                  <View
                    onTap={() => {
                      navigateToProfile(item.id);
                    }}
                  >
                    {/* 头像 */}
                    <img
                      className={styles.avatar}
                      alt=""
                      width="30px"
                      src={`${access}${item.avatar}`}
                    />
                  </View>
                </Col>
                <Col span={6}>
                  {/* 发布人名字 */}
                  <View>{item.nickName}</View>
                </Col>
                <Col offset={6} span={8}>
                  <FollowButton isFollow={item.isFollow} authorId={item.id} />
                </Col>
              </Row>
            ))}
          </Block>
        </TabContent>
        <TabContent key={tabs[1].key} tab={tabs[1].title}>
          <Block title={""}>
            {fanList.map((item) => (
              <Row key={item.id} style={{ margin: "10px 2px" }}>
                <Col span={3}>
                  <View
                    onTap={() => {
                      navigateToProfile(item.id);
                    }}
                  >
                    {/* 头像 */}
                    <img
                      className={styles.avatar}
                      alt=""
                      width="30px"
                      src={`${access}${item.avatar}`}
                    />
                  </View>
                </Col>
                <Col span={6}>
                  {/* 发布人名字 */}
                  <View>{item.nickName}</View>
                </Col>
                <Col offset={6} span={8}>
                  <FansButton isFollow={item.isFollow} authorId={item.id} />
                </Col>
              </Row>
            ))}
          </Block>
        </TabContent>
      </Tabs>
    </View>
  );
};
